<template>
    <div class="mark-list-comp">
        <div class="mark-list">
            <Mark class="mark-item" v-for="(item,index) in marks" :key="index" :mark="item"/>
        </div>
        <div v-if="total > params.pageSize">
            <div v-if="flag" class="moment-more" @click="clickMore">点击加载更多</div>
            <div v-else class="moment-more">已经到底啦!</div>
        </div>
    </div>
</template>

<script>
    import {listMak} from "@/api/business/mark"

    import Mark from "@/components/Mark"

    export default {
        name: 'MarkList',
        data() {
            return {
                marks: [],
                params: {
                    pageNum: 1,
                    pageSize: 3,
                },
                total: 0,
                flag: true, //true:表示还有数据,false表示没有数据了
            };
        },
        methods: {
            //点击更多,即下一页
            clickMore() {
                if (this.flag) {
                    this.params.pageNum++
                    this.listMak()
                }
            },
            /**
             * 获取列表
             */
            listMak() {

                listMak(this.params).then(res => {
                    this.marks.push(...res.rows)
                    console.log(this.marks)
                    this.total = res.total
                    if (!res.rows || res.rows.length == 0) {
                        this.flag = false
                    }
                })

            }
        },
        mounted() {
            this.listMak()
        },
        components: {
            Mark
        }
    }
</script>

<style scoped lang='less'>
    .mark-list-comp {
        .moment-more:hover {
            color: #E6A23C;
        }

        .moment-more {
            cursor: pointer;
            height: 30px;
            font-size: 13px;
            text-align: center;
            line-height: 30px;
            background-color: #F2F6FC;
            color: #606266;
        }

        .mark-list {
            display: flex;
            flex-wrap: wrap;
            margin-bottom: 20px;

            .mark-item {
                width: 30%;
                height: auto;
            }

        }
    }
</style>